<template>
    <view class="container" :class="{ paddingBottomBar: getAppSet().canEditAddress }">
        <header-bar :config="config"></header-bar>
        <search-bar :placeholderText="placeholderText" @searchFn="searchFn"> </search-bar>
        <view class="main">
            <uni-load-more status="loading" v-if="isLoading"></uni-load-more>
            <view v-else>
                <radio-group class="card-cell cell-item" v-for="(item, index) in datas" :key="index">
                    <label class="cell-item-checkbox" v-if="isSelect" @click="changeSelect(item)">
                        <radio
                            :value="String(item.ID)"
                            :checked="String(item.ID) == selectId"
                            :color="easyGetColor('black')"></radio>
                    </label>
                    <view class="cell-item-main">
                        <view>
                            <text class="tag tag-main" v-if="item.IsDefault">默认</text>
                            <text class="contact-name">{{ item.ContactName }}</text>
                            <text class="contact-name">{{ item.ContactTel }}</text>
                        </view>
                        <view>
                            <text class="desc"
                                >{{ item.ProvinceName }}{{ item.CityName }}{{ item.AreaName
                                }}{{ item.StreetName ? item.StreetName : "" }}{{ item.ContactAddress }}</text
                            >
                        </view>
                    </view>
                    <uni-icons
                        v-if="getAppSet().canEditAddress"
                        class="cell-item-icon-edit"
                        type="compose"
                        size="40"
                        @click="goEdit(item)"></uni-icons>
                </radio-group>
                <mescroll-empty v-if="datas.length < 1" :option="optEmpty" @emptyclick="emptyClick"></mescroll-empty>
            </view>
        </view>
        <view class="bottom-bar" v-if="getAppSet().canEditAddress">
            <text class="btn btn-fill btn-success" @click="goAdd">新增地址</text>
        </view>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import searchBar from "@/components/common/search-bar.vue"
import { chooseAddress } from "@/uni-sub-base/utils/uniApiUtil.js"
import { getReceivingAddressList, userAddressAddOrEdit, batchSmartParse } from "@/service/api/member.js"
import { GetUserAddressList } from "@/service/api/user.js"
export default {
    components: {
        "search-bar": searchBar,
    },
    data() {
        return {
            placeholderText: "搜索已有地址",
            searchKey: "",
            datas: [],
            isSelect: false,
            optEmpty: {
                icon: "/static/img/empty.png", // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
                tip: "~ 暂无数据 ~", // 空提示
            },
            isLoading: false,
            form: "",
            selectId: "",
            storeUserId: 0,
            config: {
                title: "收货地址",
                centerSlot: true,
                rightSlot: false,
                rightBtns: [
                    {
                        id: 1,
                        type: "redo",
                    },
                ],
            },
        }
    },
    mounted() {},
    onShow() {
        this.getUserAddressList()
    },
    onLoad(e) {
        if (e.from) {
            this.from = e.from
            this.isSelect = true
            this.selectId = e.selectId
        }
        this.storeUserId = e.storeUserId
    },
    methods: {
        ...mapMutations(["SET_USE_ADDRESS"]),
        //搜索
        searchFn(key) {
            this.searchKey = key
            this.getUserAddressList()
        },
        //获取微信收货地址
        chooseAddress() {
            chooseAddress((res) => {
                let item = {
                    ContactName: res.userName,
                    ContactTel: res.telNumber,
                    ContactAddress: res.provinceName + res.cityName + res.countyName + res.detailInfo,
                    IsDefault: false,
                    ProvinceName: res.provinceName,
                    CityName: res.cityName,
                    AreaName: res.countyName,
                }
                let list = []
                list.push(item)
                let param = {
                    list: list,
                }
                this.batchSmartParse(param)
            })
        },
        //智能识别
        batchSmartParse(param) {
            batchSmartParse(param).then((res) => {
                res.Data.list.forEach((e) => {
                    this.save(e)
                })
            })
        },
        //获取收货地址
        getUserAddressList() {
            let param = {
                keyword: this.searchKey,
            }
            let path = "?storeUserId=" + this.storeUserId
            if (this.searchKey != "") {
                path = path + "&keyword=" + this.searchKey
            }
            GetUserAddressList(param, path).then((res) => {
                this.datas = res.Data
            })
        },
        //进入编辑地址
        goEdit(item) {
            this.easyGoTo(
                `/pages/address/edit?data=${encodeURIComponent(JSON.stringify(item))}&storeUserId=${this.storeUserId}`,
            )
        },
        //进入新增地址
        goAdd() {
            this.easyGoTo(`/pages/address/edit?storeUserId=${this.storeUserId}`)
        },
        //保存
        save(param) {
            userAddressAddOrEdit(param).then((res) => {
                if (res.State == 1) {
                    this.easyToast("提交成功")
                    this.getReceivingAddressList()
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        emptyClick() {},
        //选择地址
        changeSelect(e) {
            const eventChannel = this.getOpenerEventChannel()
            eventChannel.emit("selectEvent", {
                ...e,
            })
            this.easyGoBack()
        },
    },
}
</script>

<style lang="scss">
.bottom-bar {
    .btn {
        height: 90rpx;
        background: $app-color-main;
        border-radius: 44rpx;
        font-size: 32rpx;
        color: #ffffff;
        flex: 1;
    }
}
.wx-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 20rpx;
}
.main {
    padding: $app-page-padding;

    .cell-item {
        flex-direction: row;
        align-items: center;
        .contact-name {
            font-weight: 700;
            font-size: 28rpx;
            margin-right: 20rpx;
        }
        .cell-item-checkbox {
            margin-right: 20rpx;
        }
        .cell-item-main {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-items: flex-start;
            margin-right: 20rpx;
        }
    }
}
.tag {
    background: $app-color-main;
    color: $color-white;
    padding: 5rpx 14rpx;
    font-size: $font-size-20;
    margin-right: 20rpx;
    width: 48rpx;
    height: 28rpx;
    border-radius: 8rpx;
}
.desc {
    color: $color-gray-3;
}
</style>
